<template>
  <div id="app">
    <Header v-if="isHeaderShow" id="headWrapper"></Header>
    <keep-alive exclude="File">
      <router-view class="mainContent" :key="$route.fullPath"></router-view>
    </keep-alive>
    <el-backtop class="backtop" target="#app" title="快点我，带你上天！"></el-backtop>
  </div>
</template>

<script>
  import Header from '@/components/Header.vue'

  export default {
    name: 'App',
    components: {Header},
    computed: {
      isHeaderShow() {
        let routerNameList = ['Error_401', 'Error_404', 'Error_500']
        if (routerNameList.includes(this.$route.name)) {
          return false
        } else {
          return true
        }
      },
      //  底部是否显示
      isFooterShow() {
        let routerNameList = [
          'File',
          'Error_401',
          'Error_404',
          'Error_500'
        ]
        if (routerNameList.includes(this.$route.name)) {
          return false
        } else {
          return true
        }
      }
    }
  }
</script>

<!-- <style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  width: 100%;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style> -->

<style lang="stylus" scoped>
  @import '~@/assets/styles/varibles.styl'
  #app
    height 100%
    overflow-x hidden
    -webkit-text-size-adjust none
    overflow-y auto
    >>> .el-backtop
      background-color $Success
      color #fff
      z-index 3
    .mainContent
      flex 1
      width 90%
      min-height calc(100vh - 70px)
      margin 0 auto
      display flex
  </style>
